<template>
    <div style="padding:12px 20px 0;">
        <el-row class="high-frequency" :gutter="30">
            <template v-for="link in highLinkList">
                <el-col :span="4" :key="link.id">
                    <el-card shadow="hover" :body-style="{padding: '0px'}">
                        <div class="grid-content bgColor">
                            <div class="grid-icon-txt2">
                                <i :class="link.icon"></i>
                                <span @click="openMenuFunction(link.url,link.name)">{{link.name}}</span>
                            </div>
                            <i class="remove-icon el-icon-close" title="" @click="deleteHighLink(link)"></i>
                        </div>
                    </el-card>
                </el-col>
            </template>
        </el-row>

    </div>
</template>

<script>
import bus from '../../common/bus';
import appUtil from '~/assets/utils/appUtil';
export default {
    name: 'homepageTop',
    data() {
        return {
            //highLinkList:require('./data/HighLinkData.json')
            highLinkList:[]
        };
    },
    created:function () {
        this.getList();
    },
    mounted:function(){
        bus.$on('val', (data) => {
            //console.log(data);
            //this.highLinkList.unshift(data);
            let isExist = this.highLinkList.some( item => {
                //console.log(item.name,data.name);
                //console.log(item.id, data.menuId);
                return item.id === data.menuId;
            });
                //console.log(isExist);
            if(!isExist){
                this.highLinkList.unshift(data);
            }
        });
    },
    methods: {
        getList(){
            this.$axios.get('/ptp-engine/api/title/all/'+appUtil.getSes('userCode'))
                .then(response => {
                    this.highLinkList = response.data.data;
                    //console.log(this.highLinkList);
                });
        },
        deleteHighLink(item){
            this.$axios.delete('/ptp-engine/api/title/'+item.id);
            let index = this.highLinkList.indexOf(item);
            if(index !== -1){
                this.highLinkList.splice(index,1);
            }
        },
        isNew(url){
            let reg = /(?:[?]|&)isNew=(\w*)(&|$)/;
            let res = reg.exec(url);
            return res && res[1] === 'true';
        },
        openMenuFunction(url,title){
            let menu = {
                url:url,
                name:title
            };
            bus.$emit('openMenu',menu,this.isNew(url));
            //console.log(url);
        }
    }
};

</script>


<style scoped>
.high-frequency {
        margin-bottom: 0;
    }
    .el-card{
        margin-bottom: 8px;
    }
    .grid-content {
        display: flex;
        align-items: center;
        height: 55px;
        cursor:pointer;
        position: relative;
        
    }
    .grid-content i.remove-icon{
        position: absolute;
        right: 0;
        top: 0;
        color:#fff;
        opacity: 0;
    }
    .grid-content:hover i.remove-icon{
        opacity: 1;
    }
    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 16px;
        color: #576069;
    }
    .grid-con-icon {
        font-size: 50px;
        width: 70px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: #2d8CF0;
    }

    .grid-con-2 .grid-con-icon {
        background: #64D572;
    }

    .grid-con-3 .grid-con-icon {
        background: #f25E43;
    }
    /* .grid-con-box-bg{
        background: #2d8CF0;
    } */
    .grid-con-bg-1{
        background: #2d8CF0;
    }

    .grid-con-bg-2{
        background: #64D572;
    }
    .grid-con-bg-3{
        background: #f25E43;
    }

    .grid-icon-txt,.grid-icon-txt2{
        color:#FFF;
        margin:15px auto;
    }

    .grid-icon-txt > i{
        font-size:50px;
        float:left;
    }
    .grid-icon-txt2 > i{
        font-size:16px;
        display: inline-block;
        margin-right: 5px;
    }
    .grid-icon-txt > span{
        display:block;
        font-size:16px;
        line-height:50px;
        margin-left:60px;
    }
    .grid-icon-txt2 > span{
        display:inline-block;
        font-size:18px;
        letter-spacing: 2px;
        line-height:50px;
    }

</style>
